body,
dd,
dl,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
menu,
ul {
    margin: 0rem;
}
ol,
li,
ul,
pre,
code,
p {
    margin-top: 0rem;
    margin-bottom: -1rem;
}

button,
input,
select,
textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    outline: 0
}

body,
html {
    height: 100%;
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #ececec;
}

.chat {
    /*position: absolute;*/
    float: top;
    top: 0;
    left: 0;
    right: 0;
    height:  calc(100% - 3rem);
    /*bottom: 5rem;*/
    overflow: hidden !important;
}


/*.bottom {*/
/*    !*position: absolute;*!*/
/*    float: bottom;*/
/*    height: 5rem;*/
/*    bottom: 0.5rem;*/
/*    left: 0;*/
/*    right: 0;*/
/*    padding-top: 0rem;*/
/*    background-color: #ffffff;*/
/*    border-top: 1px solid #ff1234;*/
/*}*/


/*.bottom .input_content .question{*/
/*    position: fixed;*/
/*    width: 100%;*/
/*    resize: none;*/
/*    !*width: 50%;*!*/
/*    !*bottom: 2rem;*!*/
/*    border:none;*/
/*    border-bottom:2px solid #ff1234;*/
/*}*/
/*.bottom .input_content .submit{*/
/*    position: fixed;*/
/*    right: 2rem;*/
/*    background-color: #4CAF50;*/
/*    border: none;*/
/*    color: white;*/
/*    text-align: center;*/
/*    cursor: pointer;*/
/*    width: 3rem;*/
/*    height: 1.5rem;*/
/*    bottom: 0.5rem;*/
/*}*/

.bottom {
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
    width: 100%;
    height: 2.8rem;
    display: block;
    border : 0px;

}
.input_01 {
    width: 100%;
    height: 100%;
    /*background-color: #ffffff;*/
    box-shadow: #d3d3d3 0px -1px 10px 5px;
}
.input_01  textarea {
    position: relative;
    float: left;
    border: 1px solid #2b74f3;
    width: calc(100% - 2.5rem);
    border-radius: 0.2rem;
    height: 100%;
    resize: none;
    display: block;
    margin: 0 auto;
    padding: 0px;
}
.input_01  input {
    height: 100%;
    float: right;
    font-size: 0.7rem;
    color: #f0f0f0;
    background-color: #2b74f3;
    border: 0px;
    border-radius: 0.2rem;
    margin-right: 0.1rem;
}
.chat>.scroll-content {
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
}

.chat .chat-content {
    clear: both;
    display: table;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 1rem .438rem 2.5rem;
}

.message {
    width: 100%;
    margin-bottom: 1.25rem;
    -webkit-animation: showChat .5s;
    animation: showChat .5s;
}



@keyframes showChat {
    0% {
        transform: translate(0, 1.875rem)
    }
    100% {
        transform: translate(0, 0)
    }
}

.message.others {
    float: left;
    text-align: left;
    clear: left
}

.message.me {
    float: right;
    text-align: right;
    clear: right;
}

.message.others .head-img {
    float: left;
}

.message.me .head-img {
    float: right;
}

.message .head-img {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: .938rem;
    /*border-radius: 50%;*/
    overflow: hidden;
}

.head-img {
    background-size: contain;
    background-position: center center;
}

.head-img img {
    width: 2.5rem
}

.content {
    overflow: hidden;
}

.message .author-name {
    height: .938rem;
    margin: 0 .875rem;
    font-size: .625rem;
    line-height: .938rem;
    color: #b0b0b0;
}

.bubble {
    max-width: 22.688rem;
    min-height: 2.5rem;
    display: inline-block;
    position: relative;
    text-align: left;
    font-size: .8rem;
    border-radius: .125rem;
    margin: 0 .875rem;
}

.bubble.bubble-image {
    border: none;
}

.bubble.bubble-default {
    background-color: #fff;
    border-color: #919191;
}

.bubble.bubble-default.left:before {
    border-color: #919191;
}

.bubble.left:before {
    left: -.188rem;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.bubble:before {
    content: '';
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: .438rem;
    height: .438rem;
    position: absolute;
    top: .938rem;
    background-color: inherit;
    border-right-color: inherit;
    border-bottom-color: inherit;
}

.bubble.right:before {
    right: -.188rem;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.bubble.right:before {
    border-color: #6c9a36;
}

.bubble.right {
    background-color: #90d936;
    border-color: #6c9a36;
}

.bubble-cont {
    word-wrap: break-word;
    word-break: break-all;
    min-height: 2.5rem;
}

.bubble-cont .plain {
    padding: .563rem .625rem;
}

.bubble-cont .plain img {
    width: 1.5rem;
    vertical-align: middle;
}


pre {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    white-space: pre-wrap;
}

@keyframes show {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
